<template>
  <div class="c-toolbar">
    <div v-for="item in toolbar" :key="item.key" class="_toolbar-item-wrapper">
      <div
        :class="[`_toolbar-item ${item.type}`, { disabled: item.disabled }]"
        @click.stop="item.type === 'button' && !item.disabled && item.fn()"
      >
        <!-- 下拉勾选框 -->
        <a-dropdown v-if="item.type === 'checkList'" class="_dropdown" :trigger="['click']">
          <a-tooltip placement="bottom" :mouseEnterDelay="1">
            <template slot="title">
              {{ item.tips }}
            </template>
            <div class="__item-content">
              <div :class="`_img-icon icon_${item.name}`"></div>
              <div>{{ item.des }}</div>
              <a-icon type="down" />
            </div>
          </a-tooltip>
          <a-menu slot="overlay" class="_check-list-menu">
            <a-checkbox-group
              v-if="item.options.length !== 0"
              :options="item.options"
              :value="item.selectedIds"
              @change="item.onChange"
            >
              <span slot="label" slot-scope="{ label }">{{ label }}</span>
            </a-checkbox-group>
          </a-menu>
        </a-dropdown>
        <!-- 下拉按钮框 -->
        <a-dropdown v-else-if="item.type === 'buttonList'" class="_dropdown" :trigger="['click']">
          <a-tooltip placement="bottom" :mouseEnterDelay="1">
            <template slot="title">
              {{ item.tips }}
            </template>
            <div class="__item-content">
              <div :class="`icon`">
                <img :src="item.icon" />
              </div>
              <div v-if="item.des" class="__des" style="margin-right: 2px">{{ item.des }}</div>
              <a-icon type="down" />
            </div>
          </a-tooltip>
          <a-menu slot="overlay" class="_button-list-menu">
            <a-menu-item
              v-for="subItem in item.children"
              :key="subItem.key"
              :disabled="subItem.disabled"
              @click="subItem.fn"
            >
              {{ subItem.name }}
            </a-menu-item>
          </a-menu>
        </a-dropdown>

        <div v-else-if="item.type === 'button'" class="__item-content">
          <a-tooltip placement="bottom" :mouseEnterDelay="1">
            <template v-if="item.name !== 'topiconline'" slot="title">
              {{ item.tips }}
            </template>
            <div v-if="item.icon" class="_img-icon"><img  :src="item.icon" /></div>
            <span v-if="item.des" class="__des g-one-line" >{{ item.des }}</span>
          </a-tooltip>
        </div>
        <div v-else-if="item.type === 'jsx'">
          <m-render :render="item.content" />
        </div>
      </div>
      <div v-if="item.line" class="_iconbarline">
        <img src="statics/icons/app/barline.svg" />
      </div>
    </div>
    <slot></slot>
  </div>
</template>
<script>
import Render from 'components/common/render';
/**
 *
 */
export default {
  name: 'comp-toolbar',
  components: {
    'm-render': Render,
  },

  props: {
    /**
     * 描述toolbar的配置文件 []
     * 提供以下类型的预置组件 button(按钮) |  buttonList(下拉按钮) | checkList(下拉勾选) | jsx 自定义组件
     * 通用的配置属性{
          name:String 按键的英文名,
          key:String key值,
          icon:String 图标,
          type:String 按钮的上述类型,
          tips: String悬浮时的提示框,
          des: String按钮前的描述文字,
          width: String 宽度px,
          line: Boolean 按钮后的分割线

     * }
     * button: {
          fn: Function,
          disabled:Boolean
      }
    * buttonList: {
          children: {
              name: String
              fn: Function
              disabled: Boolean,
          }
    }
    * checkList:{
      options: { label: String, value: Any }[],
      selectedIds: value[]
      onChange: Function
    }
    * jsx: {
      content:() => JSXElement
    }
     */
    toolbar: Array,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss">
.c-toolbar {
  width: 100%;
  height: 28px;
  line-height: 28px;
  padding-left: 4px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  background: #d4ebf8;
  border-bottom: 1px solid #99b1c5;
  ._toolbar-item-wrapper {
    display: flex;
    height: 32px;
    line-height: 32px;
    align-items: center;
  }
  ._toolbar-item {
    display: flex;
    height: 24px;
    line-height: 24px;
    margin-left: 12px;
    font-size: 12px;
    cursor: pointer;
    &.disabled {
      opacity: 0.25;
      cursor: not-allowed;
    }
    padding: 1px;
    &:hover {
      padding: 0px;
      background: linear-gradient(107deg, #a3dbff 0%, #74c5f8 100%);
      border: 1px solid #b1cee2;
    }
    .__item-content {
      display: flex;
      align-items: center;
      text-align: center;
      height: 24px;
      line-height: 24px;
	    white-space: nowrap;
      &.ant-tooltip-open {
        font-size: 12px;
      }
      ._top-btn {
        ._btn-img {
          margin-top: -2px;
        }
      }
      .scale {
        margin: 0 4px;
      }
    }
    .__des {
	    vertical-align: middle;
      margin-left: 4px;
    }
  }
  ._img-icon {
    //// height: 16px;
    width: 16px;
    display: inline-block;
    font-size: 0;
    vertical-align: middle;
    background-size: 16px 16px;
    background-repeat: no-repeat;
  }
  //// .icon_topiconline {
  ////   width: 1px;
  ////   height: 25px;
  ////   line-height: 32px;
  ////   margin-left: 8px;
  ////   border: 1px solid #b1cee2;
  //// }
  ._iconbarline {
    margin-left: 8px;
  }
}
</style>
